<template>
  <div>
    <div class="register">
      <div class="register-tab">
        <h3>欢迎注册</h3>
        <div class="toLogin">
          <span>已有账号？</span
          ><router-link to="/login">去登录&gt;</router-link>
        </div>
        <div class="registerUser">
          <span>用户名</span
          ><input
            :class="{ error: unameErr }"
            @blur="checkUname"
            v-model.trim="uname"
            type="text"
            placeholder="请设置用户名"
          /><br />
          <span class="checkmsg">{{ msg1 }}</span>
        </div>
        <div class="registerUser">
          <span>密 &nbsp; 码</span
          ><input
            :class="{ error: upwdErr }"
            @blur="checkUpwd"
            v-model.trim="upwd"
            type="password"
            placeholder="请设置登录密码"
          /><br />
          <span class="checkmsg">{{ msg2 }}</span>
        </div>
        <div class="registerUser">
          <span>手机号</span
          ><input
            :class="{ error: uphoneErr }"
            @blur="checkPhone"
            v-model.trim="uphone"
            type="text"
            placeholder="可用于登录和找回密码"
          /><br />
          <span class="checkmsg">{{ msg3 }}</span>
        </div>
        <div class="registerUser">
          <span>昵 &nbsp; 称</span
          ><input
            :class="{ error: nickErr }"
            @blur="checkNick"
            v-model.trim="nickname"
            type="text"
            placeholder="请设置昵称"
          /><br />
          <span class="checkmsg">{{ msg4 }}</span>
        </div>
        <!-- <div class="registerUser">
          <span>验证码</span
          ><input
            effect="dark"
            @keyup="openpop"
            v-model="textcode"
            type="text"
            class="check"
            placeholder="请输入验证码"
          />
          <span @click="getcode" v-if="svg" id="checkcode" v-html="svg"></span>
          <span v-else><i class="el-icon-loading"></i></span>
        </div> -->
        <p class="agreement">
          <el-popover
            ref="popover"
            placement="top-start"
            width="200"
            trigger="manual"
            v-model="agree"
            content="请先同意协议！"
            ><input
              type="checkbox"
              v-model="checked"
              id="check"
              slot="reference"
            />
          </el-popover>
          &nbsp;<label for="check">阅读并同意</label>
          <span id="agreement">《萌宠医族用户协议》</span>
        </p>
        <span
          @click="userRegister"
          id="register"
          :class="{ disabled: !checked }"
          >注册</span
        >
      </div>
    </div>
    <ind-footer />
  </div>
</template>

<script>
import IndFooter from "@/components/IndFooter.vue";
import {
  checkNickServe,
  checkUnameServe,
  userRegisterServe,
} from "@/utils/service/user";
export default {
  components: { IndFooter },
  data() {
    return {
      agree: false,
      msg: "",
      checked: false,
      svg: null,
      uname: "",
      nickname: "",
      upwd: "",
      uphone: "",
      textcode: "",
      msg1: "",
      msg2: "",
      msg3: "",
      msg4: "",
      unameErr: false,
      upwdErr: false,
      uphoneErr: false,
      nickErr: false,
    };
  },
  mounted() {},
  methods: {
    // 验证用户名
    async checkUname() {
      const exp = /^[a-zA-Z0-9_-]{6,10}$/;
      if (!exp.test(this.uname)) {
        this.msg1 = "用户名6-10位，可以是字母、数字和下划线";
        this.unameErr = true;
        return false;
      }
      let res = await checkUnameServe(this.uname);
      if (res.code == 200) {
        this.msg1 = "";
        this.unameErr = false;
        return true;
      } else {
        this.msg1 = res.msg;
        this.unameErr = true;
        return false;
      }
    },
    // 验证密码
    checkUpwd() {
      const exp = /^\w{6,12}$/;
      if (!exp.test(this.upwd)) {
        this.msg2 = "密码6-12位，可以是字母、数字和下划线";
        this.upwdErr = true;
        return false;
      } else {
        this.msg2 = "";
        this.upwdErr = false;
        return true;
      }
    },
    // 验证手机号
    checkPhone() {
      const exp = /^1[3-9]\d{9}$/;
      if (!exp.test(this.uphone)) {
        this.msg3 = `手机号格式不正确`;
        this.uphoneErr = true;
        return false;
      } else {
        this.msg3 = "";
        this.uphoneErr = false;
        return true;
      }
    },
    // 验证昵称
    async checkNick() {
      if (!this.nickname) {
        this.msg4 = "请输入昵称";
        this.nickErr = true;
        return false;
      }
      const exp = /[#_%&’/”,;:=!^]/;
      if (this.nickname.match(exp)) {
        this.msg4 = "昵称非法";
        this.nickErr = true;
        return false;
      }
      let res = await checkNickServe(this.nickname);
      if (res.code == 200) {
        this.msg4 = "";
        this.nickErr = false;
        return true;
      } else {
        this.msg4 = res.msg;
        this.nickErr = true;
        return false;
      }
    },
    // 勾选提示
    openpop(e) {
      if (e.keyCode == 13) {
        if (this.checked) {
          this.userRegister();
        } else {
          this.agree = true;
          setTimeout(() => {
            this.agree = false;
          }, 2000);
        }
      }
    },
    // 注册
    async userRegister() {
      if (
        !(await this.checkUname()) ||
        !this.checkUpwd() ||
        !this.checkPhone() ||
        !(await this.checkNick())
      )
        return;

      userRegisterServe(this.uname, this.upwd, this.uphone, this.nickname)
        .then((res) => {
          this.msg = res.msg;
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: this.msg,
            });
            this.$router.push("/login");
          } else {
            this.$message({
              type: "error",
              message: this.msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "网络请求出错",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  background-color: #faf8e4;
  letter-spacing: 1px;
  width: 100%;
  height: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .register-tab {
    width: 550px;
    margin: 0 auto;
    box-shadow: 0px 0px 5px #ccc;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 10px 60px;
    color: #aaa;
    h3 {
      font-size: 34px;
      font-weight: 600;
      color: #ad6e3f;
      margin-top: 30px;
      text-align: left;
      width: 80%;
    }
    > div {
      width: 80%;
      margin-bottom: 30px;
    }
    .toLogin {
      display: flex;
      font-size: 12px;
      a {
        color: #aaa;
        margin-bottom: 20px;
        font-weight: 600;
        &:hover {
          color: #ad6e3f;
        }
      }
    }
    .registerUser {
      span {
        margin-left: 10px;
        color: black;
      }
      span.checkmsg {
        margin-left: 90px;
        font-size: 12px;
        color: orangered;
      }
      input {
        margin-left: 20px;
        border: 1px solid #ccc;
        padding: 8px 10px;
        border-radius: 10px;
        width: 80%;
      }
      input.error {
        border-color: orangered;
      }
      input.check {
        width: 40%;
      }
    }
    #register {
      display: block;
      width: 75%;
      background-color: #ad6e3f;
      color: #fff;
      padding: 8px 10px;
      border-radius: 10px;
      text-align: center;
      font-weight: 600;
      user-select: none;
      cursor: pointer;
      margin-bottom: 30px;
      &:active {
        opacity: 0.5;
      }
      &.disabled {
        opacity: 0.3;
        pointer-events: none;
      }
    }
    label,
    #agreement {
      user-select: none;
      cursor: pointer;
    }
    #agreement:hover {
      border-bottom: 1px solid #ad6e3f;
      color: #ad6e3f;
    }
    .agreement {
      margin-bottom: 30px;
      color: black;
    }
  }
}
</style>
